<template>
	<div class="scheme-list">
		<h2>scheme配置</h2>
		<el-button
			class="add-btn"
			type="primary"
			size="small"
			@click="showAddModel=true"
		>
			创建新scheme
		</el-button>
		<div class="table-container">
			<el-table
				ref="table"
				stripe
				:data="schemes"
			>
				<el-table-column
					label="ID"
					width="100"
					prop="id"
					align="center"
				/>
				<el-table-column
					label="scheme"
					prop="scheme"
					align="center"
				/>
				<el-table-column
					label="描述"
					prop="desc"
				/>
				<el-table-column
					label="引用数量"
					prop="quote"
					align="center"
				/>
				<el-table-column
					label="创建人"
					prop="uid"
					align="center"
				/>
				<el-table-column
					label="操作"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							type="danger"
							size="mini"
							@click="onclickDel(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页器 -->
		<div class="pagination">
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="pageSize"
				:total="total"
				:current-page="pageNum"
				@current-change="getData"
			/>
		</div>
		<AddModel
			v-if="showAddModel"
			@close="showAddModel=false"
			@create="onCreateScheme"
		/>
	</div>
</template>

<script>
import { getSchemes, createScheme, removeScheme } from '@exploit/api/application'
import AddModel from './components/AddModel'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Scheme',
    },
  },
  components: {
    AddModel
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      schemes: [],
      showAddModel: false
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    /**
     * 分页加载数据
     */
    async getData(pageNum = this.pageNum) {
      try {
        this.$loading()
        const res = (await getSchemes({
          pageNum,
          pageSize: this.pageSize
        })).data

        this.total = res.total
        this.pageNum = pageNum
        this.schemes = res.pageData
        console.log(this.schemes)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
     * 点击删除
     */
    onclickDel(row) {
      if (row.quote > 0) {
        this.$error('引用数大于0, 无法删除')
        return
      }
      this.$confirm('确认删除该scheme? ', async() => {
        await removeScheme(row.id)
        this.getData(1)
      })
    },
    /**
     * 添加scheme
     */
    async onCreateScheme(data) {
      try {
        await this.$loadingFn(async() => {
          await createScheme(data)
        })
        this.$success('添加成功')
        this.getData(1)
        this.showAddModel = false
      } catch (err) {
        err
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scheme-list {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  h2 {
    margin-bottom: 10px;
    color: $blue;
  }

  .add-btn {
    position: absolute;
    top: 20px;
    right: 10px;
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
